<template>
    <!-- 选择课程 -->
    <div class="page">
        <!-- search -->
        <div style="display: flex;flex-direction: row;align-items: center;padding: 12px;background-color: #FFFFFF;">
            <div class="" @click="popBack()">
                <i class="iconfont icon-arrow-left" style="font-size: 16px;font-weight: bold;"></i>
                <span style="font-size: 16px;">选择课程</span>
            </div>
            <div style="margin-left: 12px;
				flex: 1;
				background-color: #FFFFFF;
				display: flex;
				justify-content: flex-end;
				">
                <div style="
					font-size: 14px;
					padding: 5px 12px;
					border: 1px solid #ebebeb;
					margin-right: 12px;
					background-color: #FFFFFF;">
                    返回</div>
                <div @click="saveHandle" style="
					font-size: 14px;
					border: 1px solid #ebebeb;
					padding: 5px 12px;
					color: #FFFFFF;
					background-color: #007AFF;">
                    确定</div>
            </div>
        </div>

        <!-- list -->
        <div style="flex:1;display: flex;justify-content: center;align-items: center;padding: 130px 0;"
            v-if="list.length == 0">
            <div style="font-size: 14px;color: #999999;">暂无数据</div>
        </div>
        <div v-else style="flex: 1;background-color: #F5F5F5;overflow-y: auto;padding: 12px;padding-top: 0;">
            <!-- cell -->
            <div @click="cellClickHandle(obj)" style="padding: 12px;border-radius: 8px;margin-top: 5px;"
                v-for="(obj,idx) in list" :key="idx"
                :class="[styleClassHandle(obj['id'])?'cell_selected':'cell_unselect']">
                <div style="display: flex;justify-content: space-between;">
                    <span style="font-size: 14px;font-weight: bold;">{{obj.cbiName}}</span>
                    <span style="font-size: 12px;color: #FF0000;">{{obj.state}}</span>
                </div>
                <div style="display: flex;justify-content: space-between;margin-top: 5px;">
                    <span style="font-size: 12px;color: #999999;">线下授课/{{obj.classPlace}}</span>
                    <span style="font-size: 12px;color: #999999;">{{obj.price}}</span>
                </div>
                <div style="display: flex;justify-content: space-between;margin-top: 5px;">
                    <span style="font-size: 12px;color: #999999;">{{obj.projectName}}</span>
                </div>
                <div style="display: flex;justify-content: space-between;margin-top: 5px;">
                    <span style="font-size: 12px;color: #999999;">报名时间:---</span>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import { listCourses } from "@/api/check_order";

    export default {
        data() {
            return {
                list: [],
                selectedIdsList: [],
                selectedList: [],
                classes: [],
                projectId: undefined,
            };
        },
        mounted() {
            let item = this.$route.params;
            this.projectId = item.id;

            // //   projectId
            // let json = sessionStorage.getItem("selected-course");
            // if (json != undefined) {
            //   let list = JSON.parse(json);
            //   this.selectedIdsList.push([...list]);
            //   for (const obj of list) {
            //     this.selectedIdsList.push(obj["id"]);
            //   }
            // }
            this.netListCourses();
        },
        methods: {
            popBack() {
                this.$router.back({});
            },

            styleClassHandle(id) {
                if (
                    this.selectedIdsList.indexOf(id) == -1 ||
                    this.selectedIdsList.length == 0
                ) {
                    return false;
                } else {
                    return true;
                }
            },

            cellClickHandle(data) {
                if (this.selectedIdsList.indexOf(data["id"]) == -1) {
                    this.selectedList.push(data);
                    this.selectedIdsList.push(data["id"]);
                } else {
                    let idx = this.selectedList.indexOf(data);
                    this.selectedList.splice(idx, 1);
                    this.selectedIdsList.splice(idx, 1);
                }
            },

            netListCourses() {
                let fi = {
                    projectId: this.projectId,
                };
                let self = this;
                listCourses(fi)
                    .then((res) => {
                        let { data } = res;
                        let { record } = data;
                        self.list = record;
                    })
                    .cath((e) => {
                        console.log(e);
                    });
            },

            saveHandle() {
                if (this.selectedList.length == 0) {
                    sessionStorage.removeItem("selected-course");
                } else {
                    let json = JSON.stringify(this.selectedList);
                    sessionStorage.setItem("selected-course", json);
                }
                this.$router.go(-1);
            },
        },
    };
</script>

<style scoped>
    .page {
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: #f5f5f5;
        height: 100%;
    }

    .cell_unselect {
        border: 1px solid #ebebeb;
        background-color: white;
    }

    .cell_selected {
        border: 1px solid #999999;
        background-color: white;
    }
</style>